<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  
  <style>
    
    * {
      margin: 0;
      padding: 0;
    }
    
    .top, .nav-outer {
      width: 1423px;
      margin: 0 auto;
    }
    
    .nav {
      width: 100%;
    }
    
    .main {
      width: 1000px;
      margin: 0 auto;
    }
    
    img {
      display: block;
      margin: 0 auto;
      vertical-align: middle;
    }
  
  </style>

</head>
<body>

<div class="top">
  <img src="images/top.png" alt="">
</div>
<div class="nav-outer">
  <div class="nav">
    <img src="images/nav.png" alt="">
  </div>
</div>
<div class="main">
  <img src="images/main.png" alt="">
</div>

</body>
</html>

<script src="jq/jquery-1.12.2.js"></script>
<script>

  /**
   *
   * 当页面滚动的距离大于某一个特点的值的时候，让导航固定在顶部
   * 当滚动距离小于一个孩子的时候，导航栏就回去标准流
   *
   */

  $(function () {

    $(".nav-outer").height($(".nav").height());
    $(window).scroll(function () {
      //获取滚动的距离
      var scrollTop = $(window).scrollTop();
      //获取上边的盒子的高度
      var maxHeight = $(".top").height();
      if (scrollTop > maxHeight) {
        $(".nav").css({
          position: "fixed",
          left: 0,
          top: 0
        });
      } else {
        $(".nav").css({
          position: "",
          left: 0,
          top: 0
        });
      }
    });
  });


</script>